<template>
  <div class="hover_main_container" v-show="isShowHoverPopup">
    <div class="gaunxianxinxi" v-if="treedatashow">
      <div class="tree_warpper">
        <GuanxianXinxi :treedata="treedata"></GuanxianXinxi>
      </div>
      <div class="info_warpper">
        <div
          class="guanxianxq content-item"
          v-for="(value, key, index) in nameList"
          :key="index"
        >
          <div>
            <span> {{ value }} : </span>
            <span
              >&nbsp;&nbsp;{{ dataList[key] ? dataList[key] : "/"
              }}{{ dataList[key] ? unit[key] : "" }}</span
            >
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="hover_close" @click="doCloseHoverPopup"></div> -->
    <div class="hover-content grid" v-else>
      <div
        class="content-item"
        :class="value.indexOf('最新采集时间') >= 0 ? 'sites' : ''"
        v-for="(value, key, index) in nameList"
        :key="index"
      >
        <span>{{ value }} :</span>
        <span>
          &nbsp;&nbsp;{{ dataList[key] ? dataList[key] : "/"
          }}{{ dataList[key] ? unit[key] : "" }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPOIHoverData,
  getGuanXianHoverData,
  getGwTreeData,
} from "@/api/apiPOI";
import { getBoxLineData } from "@/api/http";
import {
  FenJieJianKongDian,
  FeiFenJieJianKongDian,
  BengZhanDian,
  XuShuiChiDian,
  unitList,
  GuanXianHover,
} from "@/until/NameList";
import GuanxianXinxi from "./GuanxianXinxi.vue";
export default {
  name: "CurrentData",
  components: {
    GuanxianXinxi,
  },
  props: {
    paramsData: {
      type: Object,
      default: function () {
        return {};
      },
    },

    GuanXianData: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  watch: {
    GuanXianData: {
      handler(newVal, oldVal) {
        let paramType = (value, type) =>
          Object.prototype.toString.call(value).includes(type);
        if (paramType(newVal, "Object")) {
          // delete newVal.item
          this.dataList = newVal;
          this.getGwTreeDataFunction(newVal.chanCode);
        }
      },
      immediate: true,
    },
  },
  computed: {},
  created() {
    // console.log("=======",this.paramsData);
  },
  data() {
    return {
      guanxianshow: false,
      isShowHoverPopup: true,
      dataList: {
        // "valueErr": "故障",
        // "MODE": "远程",
        // "tm": "2023-06-16 11:41:00",
        // "kd": 100.00,
        // "sumw": 111.00,
        // "address_name": "输水东干管供水北干二分干一支管(GJC2-2)",
        // "statu": "全开",
        // "press": 0.50,
        // "sq": 0.000
      },
      //0：分界监控点；1：非分界监控点；2：蓄水池；3：泵站
      nameList: GuanXianHover,
      unit: unitList,
      treedata: [],
      treedatashow: false,
    };
  },

  methods: {
    doCloseHoverPopup() {
      this.isShowHoverPopup = false;
    },
    guanxianChildren(val) {
      if (val) {
        this.guanxianshow = true;
      } else {
        this.guanxianshow = false;
      }
    },
    async getGwTreeDataFunction(chancode) {
      // let chancode1 = "ltejdg_1";
      const { data: res } = await getGwTreeData({ code: chancode });
      console.log(res);
      if (res[0].children.length == 0) {
        // this.$emit("guanxianxinxidata", false);
        this.treedata = [];
        this.treedatashow = false;
        return;
      } else {
        // this.$emit("guanxianxinxidata", true);
        this.treedata = res;
        this.treedatashow = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.hover_main_container {
  // display: flex;
  // width: 100%;
  // height: 300px;
  // background-color: rgba(123, 232, 158, 0.1);
}

.hover_main_container:after {
  // content: "";
  // position: absolute;
  // border-width: 10px;
  // border-style: solid;
  // border-color: rgb(20, 63, 91) transparent transparent transparent;
  // top: 300px;
  // left: 200px;
}
.gaunxianxinxi {
  display: flex;
  // justify-content: space-between;
  // align-items: center;
}
.gaunxianxinxi > div {
  width: 50%;
}
// .gaunxianxinxi>div{
//   width: 200px;
//   height: 20px;
//   flex-wrap: wrap;
.info_warpper {
  padding: 0 0 0 30px;
  height: 160px;
  color: #ffffff;
  overflow-y: scroll;
}
// }
.guanxianxq {
  // height: 160px;

  // width: 50px;
  // display: flex;
}
.hover_main_title {
  height: 42px;
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  background-size: 100% 100%;
  text-align: left;
  padding-left: 20px;
  background-color: rgba(123, 232, 158, 0);
}

.hover_main_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 42px;
  letter-spacing: 0px;
  color: #ffffff;
  background-image: linear-gradient(to bottom, #fff 30%, #00baff);
  /*  背景线性渐变 */
  background-clip: text;
  -webkit-background-clip: text;
  /* 背景被裁减为文字的前景色 */
  -webkit-text-fill-color: transparent;
  /* 文字填充为透明，优先级比color高。  */
}

.hover_close {
  width: 14px;
  height: 15px;
  background: url("@/assets/poipopup/poi_popup_close.png");
  position: relative;
  top: -24px;
  left: 386px;
  cursor: pointer;
}

.hover-content {
  // padding: 20px;
}

.content-item {
  display: flex;
  justify-content: flex-start;
  padding: 4px 0;

  span:nth-child(2n + 1) {
    width: 94px;
    text-align: right;
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 18px;
    letter-spacing: 0px;
    color: #daf0ff;
  }

  span:nth-child(2n) {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 18px;
    letter-spacing: 0px;
    color: #00baff;
  }
}

.grid {
  // border: 1px solid gray;
  // width: 400px;
  // height: 200px;
  // display: grid;
  // grid-template-columns: repeat(2, 1fr);
  // overflow: hidden;
  // grid-auto-flow: row;
  // grid-gap: 5px;
  // grid-auto-rows: 50px;
  display: grid;
  // grid-template-columns: 100px 300px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
  grid-gap: 5px;
  // grid-auto-rows: 50px;
}

.sites {
  grid-column-start: span 2;
}
.blue {
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 18px;
  letter-spacing: 0px;
  color: #00baff;
}
</style>
